<template>
	<view class="content">
		<headerSpaceBetweenVue>
			<template #icon>
				<uni-icons @click="toggleCollect()" :type="!collect ? 'star' : 'star-filled'" size="22"></uni-icons>
			</template>
			<template #title>{{category.cate_name}}</template>
		</headerSpaceBetweenVue>
		<view class="detailBanner">
			<div class="header">
				<view class="left">
					<view class="icon">
						<image :src="category.icon" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="title">{{category.cate_name}}</view>
						<view class="count">共 {{category.total}} 篇文章</view>
						<view class="desc">分类描述</view>
					</view>
				</view>
				<view class="right">
					<button size="mini" @click="goAddArt()">发布</button>
				</view>
			</div>
			<view class="search-box">
				<uni-search-bar @confirm="search"  v-model="searchValue" @cancel="cancel"
					@clear="clear"></uni-search-bar>
			</view>
			<view class="tabbar-box">
				<scroll-view scroll-x>
					<view class="scroll-item" :class="{'act':actTabBar == -1}" @click="toggleTabBar(-1)">最新</view>
					<view class="scroll-item" :class="{'act':actTabBar == -2}" @click="toggleTabBar(-2)">最热</view>
					<view class="scroll-item" :class="{'act':actTabBar == item.id}" @click="toggleTabBar(item.id)"
						v-for="item in childCate" :item="item" :key="item.id">{{item.cate_name}}
					</view>
				</scroll-view>
			</view>
			<view class="art-list">
				<categoryDetailVue v-for="item in artList" :item="item" :key="item.id"></categoryDetailVue>
				<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script setup>
	import headerSpaceBetweenVue from '@/components/header-space-between/header-space-between.vue';
	import categoryDetailVue from '@/components/art-item/category-detail.vue';
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue';
	import {
		apiGetCategory,
		apiHomeArtList
	} from '@/api/apis';
	import {
		useUserStore
	} from '@/store/user';
	let category = ref([])
	let childCate = ref([])
	let actTabBar = ref(-1)
	let searchValue = ref('')
	let page = ref(1)
	let artList = ref([])
	let hasMore = ref(true)
	let isLoading = ref(false)
	let cate_id = ref('')
	let parentCate_id = 0
	let sort = ref('latset')
	let collect = ref(false)
	onLoad((e) => {
		const data = JSON.parse(e.category)
		category.value = data
		parentCate_id = data.id
		getChileCate()
		getArtList()
	})
	const goAddArt = async () => {
		const isLog = await useUserStore().verifyLog()
		if (!isLog) {
			uni.redirectTo({
				url: "/pages/login/login"
			})
		} else {
			uni.navigateTo({
				url: '/pages/article/add?cate_id=' + category.value.id
			})
		}
	}
	// 收藏分类
	const toggleCollect = () => {
		collect.value = !collect.value
	}
	// 切换分类文章列表
	const toggleTabBar = (id) => {
		actTabBar.value = id
		if (id == -1) {
			sort.value = "latset"
			cate_id.value = parentCate_id
		} else if (id == -2) {
			sort.value = "hot"
			cate_id.value = parentCate_id
		} else {
			sort.value = "latset"
			cate_id.value = id
		}
		getArtList()
	}
	// 获取文章
	const getArtList = async () => {
		await apiHomeArtList({
			page: 1,
			sort: sort.value,
			cate_id: cate_id.value == "" ? parentCate_id : cate_id.value
		}).then(res => {
			artList.value = res.data.data
		})

	}
	onReachBottom(async () => {
		if (isLoading.value || !hasMore.value) return
		isLoading.value = true
		page.value = page.value + 1
		await apiHomeArtList({
			page: page.value,
			sort: sort.value,
			cate_id: cate_id.value == "" ? parentCate_id : cate_id.value
		}).then(res => {
			if (res.data.data.length > 0) {
				isLoading.value = false
				artList.value = [...artList.value, ...res.data.data]
				if (!res.data.has_more) hasMore.value = false
			} else {
				hasMore.value = false
				isLoading.value = false
			}
		})

	})
	// 获取子分类
	const getChileCate = async () => {
		await apiGetCategory({
			pid: parentCate_id
		}).then(res => {
			childCate.value = res.data
		})
	}
	// ------------搜索---------
	const search = async (res) => {
		uni.showToast({
			title: '搜索：' + res.value,
			icon: 'none'
		})
		await apiHomeArtList({
			page: 1,
			search: searchValue.value,
			sort: sort.value,
			cate_id: cate_id.value == "" ? parentCate_id : cate_id.value
		}).then(res => {
			artList.value = res.data.data
		})
	}
	const clear = (res) => {
		/* uni.showToast({
			title: 'clear事件，清除值为：' + res.value,
			icon: 'none'
		}) */
	}

	const cancel = (res) => {
		/* uni.showToast({
			title: '点击取消，输入值为：' + res.value,
			icon: 'none'
		}) */
	}
	// ------------搜索--------
</script>

<style lang="scss" scoped>
	.uni-searchbar {
		padding: 10px 0;
	}

	scroll-view {
		lower-threshold: 150;
	}

	.content {

		.detailBanner {
			padding: 30rpx;
			padding-top: calc(var(--status-bar-height) + 130rpx);

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					flex: 1;

					.icon {
						width: 150rpx;
						height: 150rpx;
						overflow: hidden;
						border-radius: 15rpx;
						min-width: 150rpx;
						margin-right: 20rpx;
						vertical-align: top;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						color: #000;
						font-size: 32rpx;
						line-height: 50rpx;

					}

					.count {
						color: #6b7280;
						font-size: 28rpx;
					}

					.desc {
						color: #4b5563;
						font-size: 28rpx;
						overflow: hidden;
						width: 80%;
					}
				}

			}

			.tabbar-box {
				overflow: hidden;
				white-space: nowrap;
				width: 100%;

				.scroll-item {
					display: inline-block;
					text-align: center;
					line-height: 70rpx;
					border-radius: 40rpx;
					font-size: 28rpx;
					margin-right: 10rpx;
					padding: 0 30rpx;
					color: #606875;
					background-color: #f3f4f6;
				}

				.act {
					background-color: $theme-color;
					color: #fff;
				}
			}

		}
	}
</style>